<template>
  <BaseCard v-if="!modelValue.isShow || modelValue.isShow(modelValue.modelData) == true">
    <!-- 标题 + 操作按钮 -->
    <el-descriptions border :column="4" direction="vertical" :title="modelValue.title">
      <template #extra>
        <el-button size="small" v-for="button in modelValue.buttons" :key="button.name" @click="buttonClick(button)"
          :type="button.buttonClass || 'primary'">
          {{ button.name }}
        </el-button>
      </template>
    </el-descriptions>

    <!-- 自定义 Grid 布局 -->

    <div>
      <div v-for="(group, groupIndex) in modelValue.itemList" :key="groupIndex">
        <!-- 每组一个小标题 -->
        <h4 v-if="group.title" style="margin: 10px 0;">{{ group.title }}</h4>

        <div class="grid-layout"
          :style="`grid-template-columns: repeat(${group.columnCount || modelValue.columnCount || 3}, 1fr)`">
          <div v-for="(item, index) in fillItems(group.items)" :key="index" class="grid-cell" :style="{
            gridColumn: item?.span ? `span ${item.span}` : 'span 1',
            // 添加这行代码，当 isTitle 为真时，独占一行
            ...(item && item.isTitle ? { gridColumn: '1 / -1' } : {})
          }">
            <!-- 处理 isTitle 属性 -->
            <template v-if="item && item.isTitle">
              <div class="el-descriptions__title">{{ tableModel.descriptionTitle }}</div>
            </template>
            <template v-else>
              <div v-if="item && item.label" class="label"
                :style="{ width: modelValue.labelWidth || '100px', textAlign: modelValue.labelAlign || 'left' }">
                {{ item.label + ':' }}
              </div>
              <div v-if="item" class="value">
                <component
                  v-if="(!item.renderType || item.renderType == 'component') && typeof item.render === 'function'"
                  :is="item.render({ row: baseTableInfoData })" v-model="baseTableInfoData[item.field]" />

                <component v-else-if="typeof item.render === 'function' && item.renderType == 'html'"
                  v-html="item.render({ row: baseTableInfoData })" v-model="baseTableInfoData[item.field]" />

                <FilePreview v-else-if="item.fieldFormat === 'file'" v-model="baseTableInfoData[item.field]" />

                <div v-else-if="item.fieldFormat === 'img'">
                  <el-image v-if="baseTableInfoData[item.field]"
                    :preview-src-list="baseTableInfoData[item.field].split(',')" :src="baseTableInfoData[item.field]"
                    alt="Image" class="image" :class="[item.class ? item.class : 'small']" />
                </div>

                <template v-else-if="item.fieldFormat === 'imgList'">
                    <div style="width: 100%;display: flex;flex-wrap: wrap;gap:10px">
                      <el-image preview-teleported v-if="baseTableInfoData[item.field]"
                        v-for="(img,index) of getImgList(baseTableInfoData[item.field])"
                        :preview-src-list="baseTableInfoData[item.field].split(',')" :src="img" alt="Image" class="image"
                        :class="[item.class ? item.class : 'small']"/>
                    </div>
                </template>

                <template v-else-if="item.fieldFormat === 'tag'">
                  <CommonStatusTag :value="baseTableInfoData[item.field]"
                    :value-map="item.valueMap ?? [{ value: 0, label: '否', type: 'warning' }, { value: 1, label: '是', type: 'warning' }]" />
                </template>

                <div v-else>{{ formatValue(baseTableInfoData[item.field], item.type) }}</div>
              </div>
            </template>
          </div>
        </div>

        <el-divider v-if="modelValue.itemList && groupIndex !== modelValue.itemList.length - 1" />
      </div>
    </div>
    <div v-if="tableModel != null">
      <BaseTable v-model="tableModel" />
    </div>
  </BaseCard>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { TypeUtils } from "/@/utils/TypeUtils";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})
const columnCount = props.modelValue.columnCount || 3

const emits = defineEmits(['update:modelValue'])

const formatData = computed(() => {
  const items = props.modelValue.items || []
  const length = items.length
  const mod = length % columnCount
  const fill = mod === 0 ? [] : new Array(columnCount - mod).fill({})
  return [...items, ...fill]
})
const getImgList = (urls) => {
  if (TypeUtils.isArray(urls))
    return urls
  let split = urls.split(',');
  
  return split.length === 1 ? [split[0]] : split
}
const baseTableInfoData = ref(props.modelValue.modelData)

const tableModel = ref(null)
if (props.modelValue.tableModel) {
  tableModel.value = props.modelValue.tableModel
}

const fillItems = (items = []) => {
  const length = items.length
  const mod = length % columnCount
  const fill = []
  return [...items, ...fill]
}

watch(() => props.modelValue.modelData, (newVal) => {
  baseTableInfoData.value = newVal
})


// const buttonClick = (button) => {
//   if (typeof button.click === 'function') {
//     button.click(baseTableInfoData.value)
//   }

// }
// const buttonClick = (button) => {
//   if (typeof button.click === 'function') {
//     // 修正代码开始
//     // 获取 handlers 对象
//     const handlers = {
//       getRequestParams: () => {
//         // 这里需要根据你的实际情况返回请求参数
//         // 例如：
//         return props.modelValue.tableModel.requestData.query;
//       },
//       getXlsTitle: () => {
//         // 这里需要根据你的实际情况返回导出标题
//         // 例如：
//         return props.modelValue.tableModel.columns;
//       }
//     };

//     // 调用 click 函数，并传递 handlers 对象
//     button.click({ row: baseTableInfoData.value, handlers });
//     // 修正代码结束
//   }
// };
const buttonClick = (button) => {
  if (typeof button.click === 'function') {
    // 修正代码开始
    // 获取 handlers 对象
    const handlers = {
      getRequestParams: () => {
        // 这里需要根据你的实际情况返回请求参数
        return props.modelValue.tableModel.requestData.query;
      },
      getXlsTitle: () => {
        // 检查 props.modelValue.tableModel 是否存在
        if (!props.modelValue.tableModel) {
          console.error("tableModel is undefined");
          return []; // 返回一个空数组，避免报错
        }
        // 检查 props.modelValue.tableModel.columns 是否存在
        if (!props.modelValue.tableModel.columns) {
          console.error("tableModel.columns is undefined");
          return []; // 返回一个空数组，避免报错
        }
        // const title = props.modelValue.tableModel.columns;
        // console.log("导出标题:", title); // 添加这行代码
        // return title;
        //  将 columns 数组转换成一个符合导出格式的对象数组
        return props.modelValue.tableModel.columns.map(column => ({
          title: column.label,
          field: column.field // 使用 field 作为 key
        }));
      }
    };

    // 调用 click 函数，并传递 handlers 对象
    button.click({ row: baseTableInfoData.value, handlers });
    // 修正代码结束
  }
}
const formatValue = (val, type) => {
  if (val === undefined || val === null || val === "" || val === NaN) return ''
  switch (type) {
    case 'datetime':
      return new Date(val).toLocaleString()
    case 'currency':
      return `￥${parseFloat(val).toFixed(2)}`
    case 'tag':
      return `<el-tag>${val}</el-tag>` // 或者渲染组件
    default:
      return val
  }
}



</script>

<style scoped>
.grid-layout {
  display: grid;
  gap: 12px 16px;
  /* 强制列宽等分 */
  grid-template-columns: repeat(3, 1fr);
}

.grid-cell {
  display: flex;
  align-items: center;
  min-height: 40px;
  /* 统一最小行高 */
}

.label {
  font-weight: bold;
  color: #666;
  padding-right: 10px;
  display: inline-block;
  text-align: right;
  line-height: 1.5;
  /* 文本行高统一 */
}

.value {
  flex: 1;
  color: #333;
  line-height: 1.5;
  /* 文本行高统一 */
}

.el-button {
  margin-left: 8px;
}

.small {
  width: 64px;
}
</style>
